<template>  
  <view>  
    <button @click="toggleMode">{{ currentMode === 'list' ? '切换到地图模式' : '切换到列表模式' }}</button>  
    <view v-if="currentMode === 'list'">  
      <ListComponent />  
    </view>  
    <view v-else>  
      <MapComponent />  
    </view>  
  </view>  
</template>  
  
<script>  
import ListComponent from './ListComponent.vue';  
import MapComponent from './MapComponent.vue';  
  
export default {  
  components: {  
    ListComponent,  
    MapComponent  
  },  
  data() {  
    return {  
      currentMode: 'list' // 初始模式为列表模式  
    };  
  },  
  methods: {  
    toggleMode() {  
      this.currentMode = this.currentMode === 'list' ? 'map' : 'list';  
    }  
  }  
};  
</script>  
  
<style scoped>  
/* 添加一些样式 */  
.button {  
  margin: 20px;  
  padding: 10px;  
  background-color: #007aff;  
  color: white;  
  border: none;  
  border-radius: 5px;  
}  
</style>